<template>
  <div class="super-table-page" ref="superTableRef">
    <div class="m-header-wrapper">
      <div
        class="m-header-view"
        :style="{ width: tbodyWidth ? `${tbodyWidth}px` : '100%' }"
      >
        <div :class="['m-header-left',scrollLeft === 0 ? '':'has-left-shadow']">
          <!-- 选择框   -->
          <div class="row-selection m-header-cell" v-if="hasRowSelection">
            <input
              id="superTableCheckAll"
              type="checkbox"
              v-model="checkAll"
              @change="checkAllHandler"
            />
          </div>
          <m-header-cell
            v-for="(header, index) in columnLeft"
            :key="index"
            :header="header"
            :sortables="sortables"
            @updateLayout="isScrollX"
          ></m-header-cell>
        </div>
        <div class="m-header-center">
          <m-header-cell
            v-for="(header, index) in columnCenter"
            :key="index"
            :header="header"
            :sortables="sortables"
            @updateLayout="isScrollX"
            :lastHeader="index === columnCenter.length-1"
          ></m-header-cell>
        </div>
        <div
          :class="[
            'm-header-right',
            scrollRight >= 5 ? 'has-right-shadow' : '',
          ]"
        >
          <m-header-cell
            v-for="(header, index) in columnRight"
            :key="index"
            :header="header"
            :sortables="sortables"
            @updateLayout="isScrollX"
            :lastHeader="index === columnRight.length-1"
          ></m-header-cell>
          <div class="scroll-placeholder"></div>
        </div>
      </div>
    </div>
    <div class="m-tbody-wrapper" :style="tableHeight">
      <div class="m-tbody">
        <div
          class="m-tbody-view"
          :style="{
            height: `${tbodyHeight}px`,
            width: tbodyWidth ? `${tbodyWidth}px` : '100%',
          }"
        >
          <div :class="['m-tbody-left',scrollLeft === 0 ? '':'has-left-shadow']">
            <m-tr
              v-for="(row, index) in showData"
              :key="index"
              :scrollYDistance="scrollYDistance"
            >
              <template #rowSelection>
                <div class="row-selection m-td" v-if="hasRowSelection">
                  <input
                    v-model="tableData[sIndex + index].isCheck"
                    @change="checkRowHandler(row,$event)"
                    type="checkbox"
                  />
                </div>
              </template>
              <template #default>
                <m-td
                  v-for="(td, Index) in columnLeft"
                  :key="`${index}-${Index}`"
                  :column="td"
                  :row="row"
                  :index="sIndex+index"
                >
                  <template #action="{scope}">
                    <slot
                        v-bind:scope="{ row:scope.row, column: scope.column, index:scope.index }"
                        name="action"
                      ></slot>
                  </template>
                </m-td>
              </template>
            </m-tr>
          </div>
          <div class="m-tbody-center">
            <m-tr
              v-for="(row, index) in showData"
              :key="index"
              :scrollYDistance="scrollYDistance"
            >
              <template #default>
                <m-td
                  v-for="(td, Index) in columnCenter"
                  :key="`${index}-${Index}`"
                  :column="td"
                  :row="row"
                  :index="sIndex+index"
                >
                  <template #action="{scope}">
                    <slot
                        v-bind:scope="{ row:scope.row, column: scope.column, index:scope.index }"
                        name="action"
                      ></slot>
                  </template>
                </m-td>
              </template>
            </m-tr>
          </div>
          <div
            :class="[
              'm-tbody-right',
              scrollRight >= 5 ? 'has-right-shadow' : '',
            ]"
          >
            <m-tr
              v-for="(row, index) in showData"
              :key="index"
              :scrollYDistance="scrollYDistance"
            >
              <template #default>
                <m-td
                  v-for="(td, Index) in columnRight"
                  :key="`${index}-${Index}`"
                  :column="td"
                  :row="row"
                  :index="sIndex+index"
                >
                  <template #action="{scope}">
                    <slot
                        v-bind:scope="{ row:scope.row, column: scope.column, index:scope.index }"
                        name="action"
                      ></slot>
                  </template>
                </m-td>
              </template>
            </m-tr>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  onMounted,
  toRefs,
  watch,
  provide
} from "vue";
import globalMethods from "../composables/super-table/globalMethods";
import getTableAttrs from "../composables/super-table/tableAttr";
import getTableConfig from "../composables/super-table/tableConfig";

import MTr from './m-tr.vue'
import MTd from './m-td.vue'
import MHeaderCell from './m-header-cell.vue'
export default {
  name: "SuperTable",
  components:{
    MTr,
    MTd,
    MHeaderCell
  },
  props: {
    rowKey: {
      type: String,
      default: () => "id",
    },
    scroll: {
      type: [Number, String],
      default: () => 350,
    },
    height: {
      type: Number,
      default: () => 300,
    },
    column: {
      type: Array,
      required: true,
    },
    selectionRowCache: {
      type: Map,
      default: () => new Map(),
    },
  },
  setup(props, context) {
    let { column, height, selectionRowCache, rowKey } =
      toRefs(props);
    let tableData = context.attrs.modelValue
    let {
      tbodyHeight,
      tableHeight,
      tbodyWidth,
      superTableRef,
      isScrollX,
      setWidth,
    } = getTableAttrs(column, height);
    let {
      sIndex,
      eIndex,
      scrollRight,
      scrollLeft,
      scrollYDistance,
      scrollXDistance,
      checkAll,
      selectionRow,
      columnLeft,
      columnCenter,
      columnRight,
      sortables,
      showData,
      showDataNum,
      hasRowSelection,
      initConfig,
      initTable,
      initCheckAll,
      initData,
    } = getTableConfig(props, context.attrs,tbodyWidth);
    // console.log('--->slots',context)
    // 初始化配置
    initConfig();
    onMounted(function () {
      tbodyHeight.value = tableData.length * 50;
      isScrollX();
      initTable();
    });
    // 监听tableData
    watch(tableData, (v) => {
      if(context.attrs['onSelectionChange']){
        let checkCount = 0;
        v.forEach((row) => {
          if (selectionRowCache.value.get(row[rowKey.value])) {
            checkCount++;
            row.isCheck = true;
          } else {
            row.isCheck = false;
          }
        });
        initCheckAll(checkCount);
      }
      initData();
    });

    // 获取全局方法
    let {
      sortData,
      clickHeaderCell,
      checkRowHandler,
      checkAllHandler,
    } = globalMethods(context, props, {
      sortables:sortables.value,
      showData,
      sIndex,
      eIndex,
      checkAll,
      selectionRow,
    });


    provide('setWidth',setWidth)
    provide('clickHeaderCell',clickHeaderCell)
    // console.log("hasRowSelection", hasRowSelection.value);
    return {
      sIndex,
      checkAll,
      sortables,
      tableData,
      showData,
      tbodyHeight,
      tableHeight,
      tbodyWidth,
      superTableRef,
      scrollRight,
      scrollLeft,
      scrollYDistance,
      scrollXDistance,
      columnLeft,
      columnCenter,
      columnRight,
      hasRowSelection,
      checkRowHandler,
      isScrollX,
      checkAllHandler
    };
  },
};
</script>

<style lang="scss" scoped>
.super-table-page {
  margin-bottom: 50px;
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  background-color: #fafafa;
  .has-right-shadow {
    box-shadow: -2px 0px 5px #e1e1e1;
  }
  .has-left-shadow {
    box-shadow: 2px 0px 5px #e1e1e1;
  }
  .m-header-wrapper {
    position: relative;
    border-bottom: 1px solid #ccc;
    //height: 50px;
    background-color: #fafafa;
    display: flex;
    overflow-y: hidden;
    .m-header-view::-webkit-scrollbar {
      display: none;
    }
    .m-header-view {
      display: flex;
      //height: 50px;
      overflow-x: auto;
      .scroll-placeholder:after {
        content: "";
        padding-right: 17px;
      }
      .m-header-left,
      .m-header-center,
      .m-header-right {
        display: flex;
        .m-header-cell {
          height: 100%;
          padding: 0 12px;
          display: flex;
          align-items: center;
          font-weight: 600;
          border-right: 1px solid #ccc;
          // overflow: hidden;
          // text-overflow: ellipsis;
          // white-space: nowrap;
          cursor: pointer;
          > span {
            display: flex;
            flex: 1;
            justify-content: space-between;
            .text-content {
              display: flex;
              align-items: center;
            }
            .operation-icon {
              .sort-icon {
                color: #ccc;
                display: block;
                line-height: 8px;
              }
              .sort-icon:hover {
                color: #aaa;
              }
              .active-sort-icon {
                color: #1890ff !important;
              }
            }
          }
        }
      }
      .m-header-left,
      .m-header-right {
        position: sticky;
        z-index: 4;
        background: #fafafa;
      }
      .m-header-left {
        left: 0;
      }
      .m-header-right {
        right: 0;
        border-left: 1px solid #ccc;
      }
      .m-header-center {
        flex: 1;
      }
    }
  }
  .m-tbody-wrapper {
    min-height: 80px;
    // height: 300px;
    // border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    //border-right: 1px solid #ccc;
    overflow: auto;
    .m-tbody {
      .m-tbody-view {
        display: flex;
        .m-tbody-left,
        .m-tbody-center,
        .m-tbody-right {
          background-color: #fff;
          .m-tr {
            display: flex;
            border-bottom: 1px solid #ccc;
            align-items: center;
            .m-td {
              padding: 0 12px;
              line-height: 50px;
              border-right: 1px solid #ccc;
              height: 50px;
              > div {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
          .m-tr:last-child {
            border-bottom: none;
          }
        }
        .m-tbody-left,
        .m-tbody-right {
          position: sticky;
          z-index: 4;
        }
        .m-tbody-left {
          left: 0;
        }
        .m-tbody-right {
          right: 0;
          border-left: 1px solid #ccc;
        }
        .m-tbody-center {
          flex: 1;
        }
      }
    }
  }
  .row-selection {
    width: 35px;
    justify-content: center;
  }
}
</style>